import * as THREE from 'three'

import { GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { threeExport } from './threeExport';
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min';
export interface threeGlbExport { 
    mixer: THREE.AnimationMixer | undefined,
    clock: THREE.Clock,
    gui:GUI
}
export const threeGlbExport = <threeGlbExport>{
    mixer: undefined,
    clock: new THREE.Clock(),
    gui: new GUI()
}
export function loaderModel(item: string) { 
    const loader = new GLTFLoader();
    const dracoLoader = new DRACOLoader();
     dracoLoader.setDecoderPath( 'static/draco/' );
    loader.setDRACOLoader(dracoLoader);
    loader.load(item, (gltf: any) => {
        let gltfs = gltf.scene;
        if (threeExport.scene) {
            threeExport.scene.add(gltfs) 
            gltfs.traverse(function (child:any) { 
                if (child.morphTargetDictionary) {
                    const expressions = Object.keys(child.morphTargetDictionary)
                    const expressionFolder = threeGlbExport.gui.addFolder('Expressions');
                    for (let i: number = 0; i < expressions.length; i++) {
                        expressionFolder.add(child.morphTargetInfluences, `${i}` ,0,1 ).name(expressions[i])
                    }
                }
            })
            if (gltf.animations.length > 0) {
                threeGlbExport.mixer = new THREE.AnimationMixer(gltfs);  
                var action = threeGlbExport.mixer.clipAction(gltf.animations[4]); // 假设GLB模型中的第一个动画是要播放的动画  
                action.play();  
            }
        }
    })
}